<template>
  <div name="日志信息管理" class="adminLogManagement">

    <el-form :inline="true" :model="searchForm">
      <!--搜索框-->
      <el-form-item>
        <el-input
            v-model="searchForm.params.id"
            placeholder="名称"
            clearable>
        </el-input>
      </el-form-item>


      <el-form-item>
        <el-button @click="getListInfo">搜索</el-button>
        <el-button type="primary" @click="dialogFormVisible = true" >新增</el-button>
        <!--确认按钮-->
        <el-popconfirm title="确定要删除这些记录吗？"
                       @confirm="delHandle(null)"
                       style="margin-left: 10px;">
          <el-button type="danger"
                     slot="reference"
                     :disabled="delBtnStu">批量删除</el-button>
        </el-popconfirm>

      </el-form-item>
    </el-form>

    <el-table
        ref="multipleTable"
        border
        stripe
        :data="ListInfo"
        tooltip-effect="dark"
        style="width: 70%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>

      <el-table-column
          prop="operatorId"
          label="操作者id"
          width="120">
      </el-table-column>
      <el-table-column
          prop="operationType"
          label="类型" width="75">
      </el-table-column>
      <el-table-column
          prop="object"
          label="操作对象" width="100">
      </el-table-column>

      <el-table-column
          label="备份"
          width="100">
        <el-button
            slot-scope="scope"
            @click="showMoreInfo(scope.row)">
          查看
        </el-button>
      </el-table-column>

      <el-table-column
          width="150px"
          label="操作">
        <template slot-scope="scope">
          <el-button type="text"
                     @click="editHandle(scope.row.logId)"
          >编辑</el-button>

          <el-divider direction="vertical"></el-divider>

          <el-popconfirm title="确定要删除这条记录吗？"
                         @confirm="delHandle(scope.row.logId)">
            <el-button type="text" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--页码-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>


    <!--其他信息弹出框-->
    <el-dialog :visible.sync="showMoreInfoDig">

      <el-descriptions
          title="备份"
          :column="1"
          border
          direction="vertical">

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-document"></i>
            备份
          </template>
          {{textChange(moreInfo.backup)}}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!--编辑弹窗-->
    <el-dialog title="日志信息"
               :visible.sync="dialogFormVisible"
               width="600px"
               @closed="resetForm('editForm')">
      <el-form :model="editForm"
               :rules="editFormRules"
               ref="editForm">
        <el-form-item label="操作者id" prop="operatorId" label-width="100px">
          <el-input v-model="editForm.operatorId"
                    autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="operatorType" label-width="100px">
          <el-select v-model="editForm.operationType" placeholder="请选择类型">
            <el-option label="删除" value="删除"></el-option>
            <el-option label="修改" value="修改"></el-option>
            <el-option label="添加" value="添加"></el-option>
            <el-option label="测试" value="测试"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作对象" prop="object" label-width="100px">
          <el-input v-model="editForm.object" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="备份" prop="backup" label-width="100px">
          <el-input v-model="editForm.backup" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('editForm')">取 消</el-button>
        <el-button type="primary" @click.native="submitEditForm('editForm')">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "adminLogManagement"
  ,
  data(){

    let validateOperator = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('操作者id不为空'));
      }
      let regex = /^\d{5,}$/;
      if(!regex.test(value)){
        callback(new Error('非合法操作者id格式'));
      }
      callback();
    };

    let validateObject = (rule, value, callback) => {
      if (value === '')
        callback(new Error('操作对象不为空'));

      callback();
    };

    return{
      //更多消息窗
      showMoreInfoDig: false,
      //删除键
      delBtnStu: true,
      //编辑窗
      dialogFormVisible: false,

      //搜索对象
      searchForm: {
        data: '',
        method: "all-page",
        params: {
          current: this.current,
          id: 0,
          size: this.size
        }
      },
      //
      ListInfo: [
        {
          logId: 0,
          operatorId: 0,
          operationType: '',
          object: '',
          backup: ''
        }
      ],
      moreInfo:{
        backup: ''
      },


      //编辑窗口数据
      editForm: {
        logId: 0,
        operatorId: 0,
        operationType: '',
        object: '',
        backup: ''
      },

      editFormRules: {
        operatorId: [
          {required: true,validator: validateOperator , trigger: 'blur'}
        ],

        object: [
          {required: true,validator: validateObject , trigger: 'blur'}
        ]
      },

      admin:{
        adminID: 0
      },

      current: 1,
      total: 0,
      size: 10,

    }
  },
  created() {
    this.accessAdmin();
    this.getListInfo();
  }, computed: {

  }, watch:{

  }
  ,methods: {
    getListInfo(){
      const self = this;
      let json = {
        method: this.searchForm.params.id === 0
            ? 'all-page'
            : 'operator-page' ,
        params: {
          id: this.searchForm.params.id === 0 ? this.searchForm.params.id : 0,
          'current': self.current,
          'size': self.size
        }
      }

      self.$axios.post('api/adminLog/findAdminLogInfo',json)
          .then(res=>{
            self.ListInfo = res.data.data.data;
            self.current = res.data.data.currentPage;
            self.size = res.data.data.size;
            self.total = res.data.data.total;
          })

    },
    accessAdmin(){
      let url = 'api/admin/accessAdmin'
      const self = this;
      this.$axios.get(url).then((res)=>{
        const entity = res.data.data;
        self.admin = entity;

      }).catch(err => {
        console.error(err)
        this.$router.push("/adminLogin")
      })
    },

    delHandle(id) {
      let ids = []
      id ? ids.push(id) : this.multipleSelection.forEach(row => {
        ids.push(row.logId)
      })
      console.log(ids)
      let url = 'api/patient/deleteAdminLogInfo'


      this.$axios.post(url, ids).then(res => {
        this.$message({
          showClose: true,
          message: '恭喜你，操作成功',
          type: 'success',
          onClose: () => {
            this.getListInfo()
          }
        });
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(rows) {
      this.multipleSelection = rows;
      this.delBtnStu = rows.length === 0
    },
    editHandle(id){
      console.log(id)
      let json = {
        logId: id,
      }
      this.$axios.post("api/adminLog/selectAdminLogById",json).then(res => {
        this.editForm = res.data.data
        this.dialogFormVisible = true
      })

    },
    //换显示数
    handleSizeChange(val) {
      this.size = val
      this.getListInfo()
    },
    //换页
    handleCurrentChange(val) {
      this.current = val
      this.getListInfo()
    },
    //重置弹出表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.editForm = {}
      this.editForm.operatorId = this.admin.adminID;
      this.dialogFormVisible = false
      this.permDialogFormVisible = false
    },
    //提交编辑
    submitEditForm(formName){
      let choice = (this.editForm.logId !== null && this.editForm.logId !== 0);

      this.$refs[formName].validate((valid) => {
        console.log("edit")
        if (valid) {
          this.$axios.post('api/adminLog/' + ( choice
              ? "modifyAdminLogInfo"
              : "addAdminLogInfo") ,this.editForm)
              .then(res => {
                console.log(res.data)
                this.resetForm(formName)
                this.$message({
                  showClose: true,
                  message: '恭喜你，操作成功',
                  type: 'success',
                  onClose: () => {
                    this.getListInfo()
                  }
                });
              })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },


    showMoreInfo(val){
      const self = this;
      self.moreInfo.backup = val.backup;

      self.showMoreInfoDig = true;

    },
    textChange(val){
      if(val === null){
        return '暂无信息';
      }
      return val;
    }
  }
}
</script>

<style scoped>
  .adminLogManagement{
    margin: 15px 15px;
  }
  .el-pagination{
    margin: 0 auto; text-align: center;
    /*margin-top: 22px;*/
  }
</style>